<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '流失上报',
			size: '650px',
			appendToBody: true
		}"
		showConfirm
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="流失客户" prop="cus_name">
								<el-input
									v-model="info.cus_name"
									disabled
									placeholder="请输入流失客户"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="流失门店" prop="dept_name">
								<cl-shop-select
									v-model="info.dept_id"
									filterable
									placeholder="请输入流失门店"
									style="width: 100%"
									disabled
									:biz_id="info.biz_id"
								/>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="是否到店" prop="type">
								<cl-select
									v-model="form.type"
									placeholder="请选择是否到店"
									style="width: 100%"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="2" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="预约时间" prop="appoint_time">
								<el-row type="flex">
									<cl-date-picker
										v-model="form.appoint_date"
										type="date"
										placeholder="选择日期"
										:picker-options="pickerOptions"
										value-format="yyyy-MM-dd"
										:disabled="timeIsok"
										@change="appointDateChange"
									/>
									<div class="plr-1">-</div>
									<el-time-select
										v-model="form.appoint_btime"
										:picker-options="appointMinTimeOptions"
										ref="appoint_btime"
										placeholder="选择时间"
										style="width: 150px"
										:disabled="timeIsok"
										@change="setAppointTime"
									/>
								</el-row>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="未成交原因" prop="cause">
				<cl-select v-model="form.cause" placeholder="请选择未成交原因" style="width: 100%">
					<el-option label="售前原因" :value="1" />
					<el-option label="售中原因" :value="2" />
					<el-option label="门店原因" :value="3" />
					<el-option label="客户原因" :value="4" />
				</cl-select>
			</el-form-item>
			<el-form-item label="原因描述(可附最多五张张图,图片非必传)" prop="detail">
				<el-input
					v-model="form.detail"
					placeholder="请填定原因"
					type="textarea"
					:rows="3"
					style="margin-bottom: 15px"
				/>
				<cl-upload
					multiple
					:limit="5"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					
					:on-success="onUploadSuccess"
				/>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
export default {
	data() {
		const appointTimeValidator = (rule, value, callback) => {
			const { appoint_date, appoint_btime } = this.form;
			if (!appoint_date || !appoint_btime) {
				return callback(new Error("请选择预约时间"));
			}
			return callback();
		};
		return {
			pickerOptions: {
				// disabledDate(time) {
				// 	return time.getTime() <= new Date() - 24 * 60 * 60 * 1000;
				// }
			},
			appointMinTimeOptions: {
				start: "08:00",
				step: "00:30",
				end: "23:30",
				minTime: "00:00"
			},
			info: {
				dept_id: ""
			},
			form: {
				cart_id: "",
				type: "",
				cause: "",
				dept_head: "", //责任人
				detail: "",
				appoint_time: "",
				appoint_date: "", //预约日期
				appoint_btime: "" //预约开始时间
				// appoint_etime: "", //预约结束时间
			},
			rules: {
				type: [{ required: true, message: "请选择是否到店", trigger: "change" }],
				cause: [{ required: true, message: "请选择未到店原因", trigger: "change" }],
				detail: [{ required: true, message: "请填写原因", trigger: "change" }],
				appoint_time: [{ required: true, message: "请选择预约时间", trigger: "change" },{ validator: appointTimeValidator }]
			},
			saving: false,
			images: [],
			timeIsok: false
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.info;
			return this.getBizRefData(biz_id);
		}
	},
	watch: {
		"form.appoint_btime"(v) {
			this.setAppointTime();
		}
	},
	methods: {
		open(row) {
			this.info = { ...row };
			this.$refs.drawer.create(() => {
				console.log('4685874658',row);
				this.form.cart_id = this.info.cart_id;
				let timeIsok = row?.appoint_date != "待定时间";
				this.timeIsok = timeIsok;
				if (timeIsok) {
					let date = dayjs(row.appoint_date);
					this.form.appoint_date = date.format("YYYY-MM-DD");
					this.form.appoint_btime = date.format("HH:mm");
					this.setAppointTime();
					this.appointMinTime(false);
				}
				this.init();
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		onUploadSuccess(res) {
			this.images.push(res.data)
			console.log(res);
		},
		async init() {
			const { biz_id } = this.info;
			// this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
		},
		reset() {
			this.$refs.form.resetFields();
			this.$resetFields(this.form);
			this.images = [];
		},

		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { ...args } = this.form;
				let form = {
					...args,
					images: this.images.join(';')
				};
				this.saving = true;
				await this.$service.aftersale.cartLose(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},
		appointMinTime(focus = true) {
			const { appoint_date } = this.form;

			if (!appoint_date) return;

			// let now = dayjs();
			// let isAfter = dayjs(appoint_date).isAfter(now, "day");
			// let minTime = "00:00";
			// if (!isAfter) {
			// 	minTime = now.format("HH:mm");
			// }
			// this.appointMinTimeOptions.minTime = minTime;
			if (!focus) return;
			this.$nextTick(() => {
				// console.log(appoint_date);
				this.$refs.appoint_btime.focus();
			});
		},
		appointDateChange(v) {
			this.form.appoint_btime = "";
			this.setAppointTime();
			if (!v) return;
			this.appointMinTime();
		},
		setAppointTime() {
			const { appoint_date, appoint_btime } = this.form;
			this.form.appoint_time = `${appoint_date} ${appoint_btime}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.refundtotal {
	font-size: 14px;
	color: #555555;
	margin-right: 10px;
	&.f-12 {
		font-size: 12px;
		color: #d9d9d9;
	}
}
</style>
